<template>
  <div class="display-flex content-end">
    <Upload :name="name" :multiple="multiple" :showUploadList="showUploadList" :accept="accept"
      :action="`${VITE_GLOB_API_URL}${action}?token=${token}`" :headers="{
      authorization: 'authorization-text',
    }" @change="handleChange" @progress="handleProgress">
      <div class="upload">
        <Button>
          <cloud-upload-outlined />
          上传文件
        </Button>
      </div>
    </Upload>
    <div class="flex-1 m-t-3">
      <Progress :stroke-color="{ '0%': '#108ee9', '100%': '#87d068', }" :percent="percentValue">
      </Progress>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Upload, UploadChangeParam, message, Button, Progress } from 'ant-design-vue';
import { getAppEnvConfig } from '/@/utils/env';
import { useUserStore } from '/@/store/modules/user';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const userStore = useUserStore();

const token = userStore.getToken;

const emit = defineEmits(['change'])

const { VITE_GLOB_API_URL } = getAppEnvConfig();

let percentValue = ref(0)

const props = defineProps({
  name: {
    type: String,
    default: 'file',
  },
  action: {
    type: String,
    default: '/file/upload/movie',
  },
  accept: {
    type: String,
    default: 'video/mp4,video/asx,video/asf,video/mpg,video/wmv,video/3gp,video/mov,video/avi,video/flv',
  },
  showUploadList: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: true,
  }
});
const { name, action, accept, showUploadList, multiple } = props;

const handleChange = (info: UploadChangeParam) => {
  if (info.file.status !== 'uploading') {
    console.log(info.file, info.fileList);
  }

  if (info.file.status === 'done') {
    if (info.file.response.code === 200) {
      emit('change', info)

      message.success(`${info.file.name}上传成功`);
    } else {
      percentValue.value = 0;
      message.error(`${info.file.name}上传失败`);
    }

  } else if (info.file.status === 'error') {
    percentValue.value = 0;
    message.error(`${info.file.name}上传失败`);
  }
}

const handleProgress = ({ percent }) => {
  console.log('上传进度：', percent)
  percentValue.value = parseFloat(percent.toFixed(2))
}
</script>